import React from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { NavBar, Button, Flex, WhiteSpace, Modal } from 'antd-mobile';
import SingleImagePicker from '../components/SingleImagePicker';
import styles from './UploadDoctorLicPage.css';

const alert = Modal.alert;

const imagePickerStyle = {
  position: 'relative',
  width: 270,
  height: 202,
  border: '1px solid #000',
};

const imageStyle = {
  margin: 0,
  padding: 0,
  height: 202,
  display: 'block',
  width: '100%',
  position: 'relative',
};

const fileStyle = {
  height: 202,
  width: 270,
  position: 'absolute',
  left: '0',
  top: '0',
  bottom: '0',
  right: '0',
  margin: 'auto',
};

function UploadDoctorLicImage({ doctorLic, dispatch }) {
  const { uploadToken, buttonStatus } = doctorLic;
  function uploadImage1Success(res) {
    const image1Url = `http://certificationdata.jiukangguoji.cn/${res.key}`;
    // dispatch action to set state
    dispatch({
      type: 'doctorLic/uploadImage1Success',
      payload: image1Url,
    });
  }
  function uploadImage2Success(res) {
    const image2Url = `http://certificationdata.jiukangguoji.cn/${res.key}`;
    // dispatch action to set state
    dispatch({
      type: 'doctorLic/uploadImage2Success',
      payload: image2Url,
    });
  }
  function onSubmit() {
    dispatch({
      type: 'doctorLic/submit',
    });
    alert('', '您的医师信息已提交，审核需1个工作日', [
      { text: '我知道了',
        onPress: () => {
          window.location.href = '/showqrcode.html';
        },
        style: { fontWeight: 'bold' } },
    ]);
  }
  function onRightClick() {
    alert('', '您的医师信息尚未完善，本次认证跳过后请移步应用商店下载9K医生App,在App端完成医师认证并领取认证奖励', [
    { text: '取消', onPress: () => console.log('cancel'), style: 'default' },
      { text: '跳过,在App认证',
        onPress: () => {
          window.location.href = '/showqrcode.html';
        },
        style: { fontWeight: 'bold' } },
    ]);
  }
  return (
    <div className={styles.normal}>
      <NavBar leftContent="医师头像" rightContent={<span onClick={onRightClick} >跳过，稍后认证</span>} mode="light" onLeftClick={() => dispatch(routerRedux.push('/uploadDoctorImage'))} />
      <div className={styles.title}>上传医师执业证书</div>
      <div className={styles.attention}>确保所有内容清晰可见</div>
      <Flex>
        <Flex.Item>
          <SingleImagePicker accept="image/*" uploadToken={uploadToken} keyPrefix="doctor/lic" style={imagePickerStyle} imageStyle={imageStyle} fileStyle={fileStyle} className={styles.sip} maxSize="5M" onComplete={uploadImage1Success} />
        </Flex.Item>
        <Flex.Item>
          <SingleImagePicker accept="image/*" uploadToken={uploadToken} keyPrefix="doctor/lic" style={imagePickerStyle} imageStyle={imageStyle} fileStyle={fileStyle} className={styles.sip} maxSize="5M" onComplete={uploadImage2Success} />
        </Flex.Item>
      </Flex>
      <Flex>
        <Flex.Item>
          <div style={{ textAlign: 'center' }} >首页</div>
        </Flex.Item>
        <Flex.Item>
          <div style={{ textAlign: 'center' }} >第二页</div>
        </Flex.Item>
      </Flex>
      <WhiteSpace size="lg" />
      <div className={styles.example}>
        <div className={styles.attention}>示例</div>
        <div className={styles.sdiv}>
          <Flex>
            <Flex.Item style={{ textAlign: 'center' }}>
              <img src="images/licence1.png" alt="" />
            </Flex.Item>
            <Flex.Item style={{ textAlign: 'center' }}>
              <img src="images/licence2.png" alt="" />
            </Flex.Item>
          </Flex>
          <Flex>
            <Flex.Item>
              <div style={{ textAlign: 'center' }} >首页</div>
            </Flex.Item>
            <Flex.Item>
              <div style={{ textAlign: 'center' }} >第二页</div>
            </Flex.Item>
          </Flex>
        </div>
      </div>
      <div className={styles.subbtn}>
        <Button className="btn" disabled={buttonStatus} type="primary" onClick={onSubmit}>提交审核</Button>
      </div>
    </div>
  );
}

function mapStateToProps({ doctorLic }) {
  return { doctorLic };
}

export default connect(mapStateToProps)(UploadDoctorLicImage);
